var chrom_list = [];
for(var i =1;i <= 22; i++) {
    chrom_list.push({value:i+'',label:i+''});
}
chrom_list.push({value:'X',label:'X'});
chrom_list.push({value:'Y',label:'Y'});

var dataset_list = [{label:'FinalC',id:'crad'},{label:'FinalC - NonProximal',id:'crad-np'},{label:'FinalD',id:'crad'}];

var scatterplot_window,scatterplot_window_mask;

var order_list = [{value:'rank',label:'Rank'},{value:'weight',label:'Weight'}];

var limit_list = [{value:10,label:'10'},{value:20,label:'20'},{value:40, label:'40'},{value:100, label:'100'},{value:200, label:'200'}];

function generateFeatureRequest() {
    requestFeatureData(
            Ext.getCmp('datasource_combo').getValue(),
            Ext.getCmp('featurelabel_field').getValue(),
            Ext.getCmp('chr_combo').getValue(),
            Ext.getCmp('chr_start').getValue(),
            Ext.getCmp('chr_stop').getValue(),
            Ext.getCmp('min_importance').getValue(),
            Ext.getCmp('order_combo').getValue(),
            Ext.getCmp('limit_combo').getValue(),
            Ext.getCmp('target_source_combo').getValue(),
            Ext.getCmp('target_chr_combo').getValue(),
            Ext.getCmp('min_correlation').getValue()
            );
}

function renderScatterPlot() {
    openSPWindow();
    scatterplot_draw(document.getElementById('scatterplot_panel'));
    scatterplot_window_mask.hide();
}

function openSPWindow() {
    scatterplot_window.show();
    scatterplot_window_mask =  new Ext.LoadMask('scatterplot-window', {msg:"Loading Data..."});
    scatterplot_window_mask.show();
}


Ext.onReady(function() {
    new Ext.Viewport({
        layout: {
            type: 'border',
            padding: 5
        },
        defaults: {
            split: true
        },
        items: [{
            region: 'north', id:'toolbar-region',
            collapsible: false,
            border : false,
            title: 'Regulome Explorer',
            split: false,
            height: 27,
            layout : 'fit'
//            tbar: {
//                xtype:'toolbar',
//                height : 27,
//                items: [{
//                    type:'menu',
//                    title: 'Menu',
//                    items : [{
//                        xtype:'menuitem',
//                        title:'Item 1'
//                    }]
//                }]
//            }
        },{
            region: 'west',
            id:'data-region',
            name:'data-region',
            collapsible: true,
            floatable: true,
            title: 'Data',
            split: true,
            width: 100,
            items: [
                {   xtype:'listview',
                    id:'dataset_list',
                    name:'dataset_list',
                    mode : 'local',
                    multiselect: false,
                    store: new Ext.data.JsonStore({
                        autoLoad:true,
                        root:'Datasets',
                        storeId:'dataset_list_store',
                        fields:['label','id'],
                        data : dataset_list
                    }),
                    columns:[{
                        header : 'Id',
                        dataIndex:'label'
                    }]
                }]
        },{
            region: 'center', id: 'view-region',
            title: 'Views',
            autoScroll : 'true',
            layout: 'auto',
            border: true,
            items: [{
                xtype: 'panel', id:'circle-parent',
                layout : 'fit',
                height: 900,
                collapsible : true,
                title : 'Genome-level View',
                listeners : {
                    render : function () { loadAnnotations(function() {generateFeatureRequest();});}
                },
                items : [ {
                    xtype: 'panel', id:'circle-panel'
                } ]
            }, {
                xtype: 'panel', id:'linear-parent',
                layout : 'fit',
                height: 900,
                collapsible : true,
                title : 'Chromosome-level View',
                items : [ {
                    xtype: 'panel', id:'linear-panel'
                }]
            }, {
                xtype: 'panel',  id:'grid-panel',
                name : 'grid-panel',
                layout : 'fit',
                height: 350,
                collapsible : true,
                title : 'Data-level View',
                items : [
                    {
                        xtype:'grid',
                        id : 'data_grid',
                        name : 'data_grid',
                        cm : new Ext.grid.ColumnModel({
                            columns: [
                                { header: "Feature Type", width: 150,  id:'source', dataIndex:'source'},
                                { header: "Feature Label", width: 150, id: 'label',dataIndex:'label'},
                                { header: "Chr", width:50 , id:'chr', dataIndex:'chr'},
                                { header: "Rank", width:120, id:'rank',dataIndex:'rank'},
                                { header: "Weight", width:120, id:'rank',dataIndex:'weight'},
                                { header: "Pathway",width: 300,id:'pathway',dataIndex:'pathway'}
                            ],
                            defaults: {
                                sortable: true,
                                width: 100
                            }
                        }),
                        store : new Ext.data.JsonStore({
                            autoLoad:false,
                            storeId:'data_grid_store',
                            fields : ['source','label','chr','rank','weight','pathway']
                        })
                    }]
            }]
        },{
            region: 'east',
            collapsible: true,
            split: true,
            width: 250,
            title: 'Tools',
            layout: {
                type: 'accordion'
            },
            items: [{
                xtype: 'panel', id:'filters',
                title : 'Filtering',
                height : 300,
                items :[
                    { xtype:'form',
                        id :'filter_panel',
                        name :'filter_panel',
                        bodyStyle:'padding:5px 5px 5px 5px',
                        defaults:{anchor:'90%'},
                        labelAlign : 'right',
                        labelWidth: 90,
                        labelSeparator : '',
                        defaultType:'textfield',
                        monitorValid : true,
                        buttons : [
                            {
                                text: 'Filter',
                                formBind : true,
                                listeners : {
                                    click : function(button,e) {
                                        generateFeatureRequest();
                                    }
                                }
                            },

                            { text: 'Reset',
                                listeners : {
                                    click : function(button,e) {
                                        requestFeatureData(
                                                Ext.getCmp('datasource_combo').reset(),
                                                Ext.getCmp('featurelabel_field').reset(),
                                                Ext.getCmp('chr_combo').reset(),
                                                Ext.getCmp('chr_start').reset(),
                                                Ext.getCmp('chr_stop').reset(),
                                                Ext.getCmp('min_importance').reset(),
                                                Ext.getCmp('order_combo').reset(),
                                                Ext.getCmp('limit_combo').reset(),
                                                Ext.getCmp('target_source_combo').reset(),
                                                Ext.getCmp('target_chr_combo').reset()
                                                )
                                    }
                                }
                            }
                        ],
                        items : [
                            {  xtype:'label',
                                text:'Target'
                            },
                            {
                                xtype:'combo',
                                name:'datasource_combo',
                                id:'datasource_combo',
                                mode:'local',
                                allowBlank : true,
                                store: new Ext.data.JsonStore({
                                    autoLoad : true,
                                    fields : ['value','label'],
                                    idProperty:'value',
                                    data: [
                                        {value: '*',label:'All'},
                                        {value: 'GEXP',label:'Gene Expression'},
                                        {value: 'METH',label:'Methylation'},
                                        {value: 'CNVR',label:'Copy # Var'},
                                        {value: 'CLIN',label:'Clinical'}
                                    ],
                                    storeId:'datasource_combo_store'
                                }),
                                fieldLabel:'Feature Type',
                                valueField:'value',
                                displayField:'label',
                                tabIndex : 0,
                                typeAhead : true,
                                selectOnFocus:true,
                                triggerAction : 'all',
                                forceSelection : true,
                                emptyText : 'Select a Source...',
                                value : '*'
                            }, {
                                name:'featurelabel_field',
                                id:'featurelabel_field',
                                emptyText : 'Input Label...',
                                tabIndex: 1,
                                selectOnFocus:true,
                                fieldLabel:'Feature Label:'
                            },
                            { xtype:'combo', name:'chr_combo',id:'chr_combo',
                                mode:'local',
                                allowBlank : true,
                                store: new Ext.data.JsonStore({
                                    autoLoad : true,
                                    fields : ['value','label'],
                                    idProperty:'value',
                                    data: chrom_list,
                                    storeId:'chr_combo_store'
                                }),
                                fieldLabel:'Chromosome',
                                valueField:'value',
                                displayField:'label',
                                tabIndex : 2,
                                typeAhead : true,
                                selectOnFocus:true,
                                triggerAction : 'all',
                                emptyText : 'Select Chr...',
                                value : ''
                            },{xtype : 'numberfield',
                                id:'chr_start',
                                name :'chr_start',
                                allowNegative: false,
                                decimalPrecision : 0,
                                emptyText : 'Input value...',
                                invalidText:'This value is not valid.',
                                maxValue: 99999999,
                                minValue:1,
                                tabIndex : 1,
                                validateOnBlur : true,
                                allowDecimals : false,
                                fieldLabel : 'Start >=',
                                value : ''
                            },{xtype : 'numberfield',
                                id:'chr_stop',
                                name :'chr_stop',
                                allowNegative: false,
                                decimalPrecision : 0,
                                emptyText : 'Input value...',
                                invalidText:'This value is not valid.',
                                maxValue: 250999999,
                                minValue:1,
                                tabIndex : 1,
                                validateOnBlur : true,
                                allowDecimals : false,
                                fieldLabel : 'Stop <=',
                                value : ''
                            },

                            { xtype:'combo', name:'order_combo',id:'order_combo',
                                mode:'local',
                                allowBlank : true,
                                store: new Ext.data.JsonStore({
                                    autoLoad : true,
                                    fields : ['value','label'],
                                    idProperty:'value',
                                    data: order_list,
                                    storeId:'order_combo_store'
                                }),
                                fieldLabel:'Order By',
                                valueField:'value',
                                displayField:'label',
                                tabIndex : 2,
                                typeAhead : true,
                                selectOnFocus:true,
                                triggerAction : 'all',
                                value : 'weight'
                            },
                            { xtype:'combo', name:'limit_combo',id:'limit_combo',
                                mode:'local',
                                allowBlank : true,
                                store: new Ext.data.JsonStore({
                                    autoLoad : true,
                                    fields : ['value','label'],
                                    idProperty:'value',
                                    data: limit_list,
                                    storeId:'limit_combo_store'
                                }),
                                fieldLabel:'Max Results',
                                valueField:'value',
                                displayField:'label',
                                tabIndex : 2,
                                typeAhead : true,
                                selectOnFocus:true,
                                triggerAction : 'all',
                                value : 10
                            },{
                                xtype:'label',
                                text:'Predictor'
                            },{xtype:'combo',
                                id:'target_source_combo',
                                name:'target_source_combo',
                                mode:'local',
                                allowBlank : true,
                                store: new Ext.data.JsonStore({
                                    autoLoad : true,
                                    fields : ['value','label'],
                                    idProperty:'value',
                                    data: [
                                        {value: '*',label:'All'},
                                        {value: 'GEXP',label:'Gene Expression'},
                                        {value: 'METH',label:'Methylation'},
                                        {value: 'CNVR',label:'Copy # Var'},
                                        {value: 'CLIN',label:'Clinical'}
                                    ],
                                    storeId:'target_source_combo_store'
                                }),
                                fieldLabel:'Feature Type',
                                valueField:'value',
                                displayField:'label',
                                tabIndex : 0,
                                typeAhead : true,
                                selectOnFocus:true,
                                triggerAction : 'all',
                                forceSelection : true,
                                emptyText : 'Select a Source...',
                                value : '*'
                            },{ xtype:'combo', name:'target_chr_combo',id:'target_chr_combo',
                                mode:'local',
                                allowBlank : true,
                                store: new Ext.data.JsonStore({
                                    autoLoad : true,
                                    fields : ['value','label'],
                                    idProperty:'value',
                                    data: chrom_list,
                                    storeId:'chr_combo_store'
                                }),
                                fieldLabel:'Chromosome',
                                valueField:'value',
                                displayField:'label',
                                tabIndex : 2,
                                typeAhead : true,
                                selectOnFocus:true,
                                triggerAction : 'all',
                                emptyText : 'Select Chr...',
                                value : ''
                            },{
                                xtype:'label',
                                text:'Link'
                            },
                            {xtype : 'numberfield',
                                id:'min_importance',
                                name :'min_importance',
                                allowNegative: false,
                                decimalPrecision : 2,
                                emptyText : 'Input value...',
                                invalidText:'This value is not valid.',
                                minValue:0,
                                tabIndex : 1,
                                validateOnBlur : true,
                                fieldLabel : 'Importance >=',
                                value : ''
                            },
                            {xtype : 'numberfield',
                                id:'min_correlation',
                                name :'min_correlation',
                                allowNegative: false,
                                decimalPrecision : 2,
                                emptyText : 'Input value...',
                                invalidText:'This value is not valid.',
                                minValue:0,
                                tabIndex : 1,
                                validateOnBlur : true,
                                fieldLabel : 'Correlation >=',
                                value : ''
                            }
                        ]
                    }

                ]
            }, {
                xtype: 'panel', id:'selection',
                title : 'Selection',
                height : 300
            },{
                xtype: 'panel', id:'navigation',
                title : 'Navigation',
                height : 300
            },{
                xtype: 'panel',  id:'export',
                title : 'Export',
                height : 300
            }]
        }],
        renderTo:Ext.getBody()
    });

    scatterplot_window =
            new Ext.Window({
                id          : 'scatterplot-window',
                renderTo    : 'view-region',
                modal       : false,
                closeAction : 'hide',
                layout      : 'anchor',
                width       : 500,
                height      : 400,
                title       : "Scatterplot",
                closable    : true,
                layoutConfig : {
                                animate : true
                },
                maximizable : false,
                items : [{
                    xtype:'panel',
                    id:'scatterplot_panel',
                    name:'scatterplot_panel',
                    margins: '3 0 3 3',
                    height : 400,
                    width : 500,
                    frame:true
                }]
            });
    scatterplot_window.hide();
});

function requestFeatureData() {
    arg_obj = {source:arguments[0],label:arguments[1], chr:arguments[2], start:arguments[3],stop:arguments[4],
        importance:arguments[5],order:arguments[6],limit:arguments[7], target_source:arguments[8],target_chr:arguments[9],correlation:arguments[10]};
    loadFilteredData(arg_obj);
};

